<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

		<script src="../../js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>

        <link href="./11.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript">
        	 function f1() {
        	 	console.log($("input[type='checkbox']:checked"));//得到的是所有选择的标签组成的数组
				// '22,33,44'
				var str = '';
				var checkboxs = $("input[type='checkbox']:checked");
				for (var i = 0; i < checkboxs.length; i++) {
					console.log(checkboxs[i].value);
					console.log(checkboxs.eq(i).val());
					str += checkboxs[i].value + ',';
				}
				console.log(str);
				console.log(str.substring(0, str.length - 1));
        	 }
			 
			 function f2() {
			 	console.log($("input[type='checkbox']:checked"));//得到的是所有选择的标签组成的数组
				var checkboxs = $("input[type='checkbox']:checked");
				var str = '';
				/* 
				$(checkboxs).each(function() {
					// this JS DOM对象
				}; 
				*/
				$.each(checkboxs, function() {
					// 这里面有一个隐藏的，代表正在遍历的对象
					// this JS DOM对象
					//str += this.value + ',';
					
					//DOM对象转换成JQuery对象，只需要把DOM对象作为参数传递给$()
					str += $(this).val() + ',';
				});
				
				//'22,33,44,'
				console.log(str);
				console.log(str.substring(0, str.length - 1));
			 				
			 }
        	 
        	 function  f3() {
				 // attribute filed  property
        	 	//$(".hby:eq(1)").prop("checked", true);
        	 	
        	 	//设置多个复选框选中
        	 	$('.hby').val([22, 33]);
        	 }
        </script>
        <style type="text/css">
        	div{color:red; border:4px solid blue;}
        </style>
    </head>
    <body>
        <h1>复选框操作</h1>

        爱好：<!-- 22,33,44 -->
        <input type="checkbox" class="hby"  name="hobby" value="11" />篮球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="22" />足球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="33" />排球&nbsp;
        <input type="checkbox" class="hby" name="hobby" value="44" />乒乓球&nbsp;
        
        <br /><br />
        <input type="button" value="获取" onclick="f1()" />
		<input type="button" value="获取" onclick="f2()" />
        <input type="button" value="设置" onclick="f3()" />
    </body>
</html>